<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="/shared/bootstrap/bootstrap.css" />
    <script src="/shared/bootstrap/bootstrap.bundle.js"></script>
    <script src="/shared/lodash/lodash.js"></script>
    <link rel="stylesheet" href="index.css" />
  </head>

  <body>
    <div class="main">
      <div class="topbar"></div>
      <div class="box">
        <div class="divbg">
          <div class="form-floating mb-3 searchbox">
            <input
              type="text"
              class="form-control"
              id="mysearch"
              placeholder="name@example.com"
            />
            <label for="floatingInput">搜索关键字</label>
            <ul class="list-group searchlist" id="list"></ul>
          </div>
        </div>
        <div class="latestnews"></div>
        <ul class="nav nav-tabs" id="myTab" role="tablist">
          <li class="nav-item" role="presentation">
            <button
              class="nav-link navsty active"
              id="home-tab"
              data-bs-toggle="tab"
              data-bs-target="#tab0"
              type="button"
              role="tab"
              aria-controls="home"
              aria-selected="true"
            >
              最新动态
            </button>
          </li>
          <li class="nav-item" role="presentation">
            <button
              class="nav-link navsty"
              id="profile-tab"
              data-bs-toggle="tab"
              data-bs-target="#tab1"
              type="button"
              role="tab"
              aria-controls="profile"
              aria-selected="false"
            >
              典型案例
            </button>
          </li>
          <li class="nav-item" role="presentation">
            <button
              class="nav-link navsty"
              id="contact-tab"
              data-bs-toggle="tab"
              data-bs-target="#tab2"
              type="button"
              role="tab"
              aria-controls="contact"
              aria-selected="false"
            >
              通知公告
            </button>
          </li>
        </ul>
        <div class="tab-content" id="myTabContent">
          <div
            class="tab-pane fade show active"
            id="tab0"
            role="tabpanel"
            aria-labelledby="home-tab"
          >
            111
          </div>
          <div
            class="tab-pane fade"
            id="tab1"
            role="tabpanel"
            aria-labelledby="profile-tab"
          >
            222
          </div>
          <div
            class="tab-pane fade"
            id="tab2"
            role="tabpanel"
            aria-labelledby="contact-tab"
          >
            333
          </div>
        </div>
      </div>
      <!-- <input type="text" name="" id="mysearch">
        <ul id="list"></ul> -->
    </div>

    <script>
      var ajax = function (evt) {
        console.log(evt.target.value)
        if (!evt.target.value) {
          list.innerHTML = ''
          return
        }
        var oscript = document.createElement('script')
        oscript.src = `https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=60449,60824,60816&wd=${evt.target.value}&his=%5B%7B%22time%22%3A1663731731%2C%22kw%22%3A%22%E7%94%B5%E8%84%91%E7%AE%A1%E5%AE%B6%22%7D%2C%7B%22time%22%3A1687836953%2C%22kw%22%3A%22%E5%9F%BA%E7%A1%80%E6%89%93%E5%AD%97%E5%9F%B9%E8%AE%AD%E6%9C%BA%E6%9E%84%22%7D%2C%7B%22time%22%3A1698249361%2C%22kw%22%3A%22%E5%87%BD%E6%95%B0%22%2C%22fq%22%3A2%7D%5D&req=2&csor=2&pwd=a&cb=aaa&_=1728032692281`
        document.body.appendChild(oscript)

        oscript.onload = function () {
          oscript.remove()
        }
      }

      function aaa(obj) {
        console.log(obj.g)
        list.innerHTML = obj.g
          .map(
            (item) => `
            <li class="list-group-item">${item.q}</li>
`
          )
          .join('')
      }
      //函数防抖。闭包使得timer能够写在函数里面
      mysearch.oninput = (function () {
        var timer = null
        return function (evt) {
          if (timer) {
            clearTimeout(timer)
          }
          timer = setTimeout(function () {
            ajax(evt)
          }, 500)
        }
      })()
      mysearch.onblur = function () {
        list.innerHTML = ''
      }
    </script>
    <script src="index.js" type="module"></script>
  </body>
</html>
